<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>html和xhtml的区别</h2>
    <p>html基本是一种web网页设计语言,xhtml是基于xml置标语言</p>
    <div>
      <h2>XHTML 元素必须合理嵌套</h2>
      <p>
        在 HTML 中，一些元素可以不互相嵌套，像这样：
        <!-- <b><i>粗体和斜体文本</b></i> -->
      </p>
      <p>
        在 XHTML 中，所有的元素都必须互相合理地嵌套，像这样：
        <!-- <b><i>粗体和斜体文本</i></b> -->
      </p>
    </div>
    <div>
      <h2>XHTML 元素必须有关闭标签</h2>
      <p>
        错误示例：
        <!-- 
            <p>这是一个段落
            <p>这是另外一个段落 
        -->
      </p>
      <p>
        正确示例：
        <!-- 
            <p>这是一个段落</p>
            <p>这是另外一个段落</p>
        -->
      </p>
    </div>
    <div>
      <h2>空元素必须包含关闭标签</h2>
      <p>
        错误示例：
        <!-- 
            分行:<br>
            水平线: <hr>
            图片: <img src="happy.gif" alt="Happy face">
        -->
      </p>
      <p>
        正确示例：
        <!--  
            分行:<br />
            水平线: <hr />
            图片: <img src="happy.gif" alt="Happy face" />
        -->
      </p>
    </div>
    <div>
      <h2>XHTML 元素必须是小写</h2>
      <p>
        错误示例：
        <!--        
            <BODY>
            <P>这是一个段落</P>
            </BODY>
        -->
      </p>
      <p>
        正确示例：
        <!--         
            <body>
            <p>这是一个段落</p>
            </body>
        -->
      </p>
    </div>
    <div>
      <h2>属性名称必须是小写</h2>
      <p>
        错误示例：
        <!--            
            <table WIDTH="100%">
        -->
      </p>
      <p>
        正确示例：
        <!--                  
            <table width="100%">
        -->
      </p>
    </div>
    <div>
      <h2>属性值必须有引号</h2>
      <p>
        错误示例：
        <!--                  
            <table width=100%>
        -->
      </p>
      <p>
        正确示例：
        <!--                          
            <table width="100%">
        -->
      </p>
    </div>
    <div>
      <h2>不允许属性简写</h2>
      <p>
        错误示例：
        <!--            
            <input checked>
            <input readonly>
            <input disabled>
            <option selected>
        -->
      </p>
      <p>
        正确示例：
        <!--                  
            <input checked="checked">
            <input readonly="readonly">
            <input disabled="disabled">
            <option selected="selected">
        -->
      </p>
    </div>
    <div>
      <h2>如何将 HTML 转换为 XHTML</h2>
      <ol>
        <li>添加一个 XHTML <!DOCTYPE > 到你的网页中</li>
        <li>添加 xmlns 属性添加到每个页面的html元素中。</li>
        <li>改变所有的元素为小写</li>
        <li>关闭所有的空元素</li>
        <li>修改所有的属性名称为小写</li>
        <li>所有属性值添加引号</li>
      </ol>
    </div>
  </body>
</html>
